<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>后台管理</title>
    <script th:src="@{js/index.js}"></script>
    <style>
        /* 全局样式 */
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }

        /* 页面布局 */
        .container {
            display: flex;
        }

        .sidebar {
            width: 200px;
            height: 90vh;
            background-color: #333;
            color: #fff;
            padding: 20px;
        }

        .content {
            flex-grow: 1;
            padding: 20px;
        }

        /* 链接样式 */
        .sidebar a {
            display: block;
            margin-bottom: 10px;
            color: #fff;
            text-decoration: none;
            height: 40px;
            line-height: 40px;
            padding: 0 10px;
            background-color: #333;
        }

        .sidebar a:hover {
            color: #ffcc00;
        }

        /* 选中菜单样式 */
        .sidebar a.active {
            background-color: #ffcc00;
        }

        /* 欢迎标题样式 */
        h1 {
            color: #333;
        }

        /* 用户名称样式 */
        p {
            margin-bottom: 20px;
            color: #777;
        }

        iframe {
            border: none;
        }

        img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-top: -15px;
            margin-right: 10px;
            margin-left: 10px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="sidebar">
        <p style="display: flex">
            <img id="imagePath" alt="图片">
            <!--   <img th:src="">-->

            <span id="username"></span>!</p>

        <a th:href="@{/selectAllUser}" target="content">用户列表</a>
        <!-- 修改密码 -->
        <a th:href="@{/selectAllFile}" target="content">文件列表</a>

        <a th:href="@{/uploadFile}" target="content">上传文件</a>

        <a th:href="@{/toFileList}" target="content">同步文件</a>

        <!-- 退出登录 -->

        <!-- 上传文件 -->
        <a th:href="@{/person}"  target="content">个人中心</a>

        <!-- 文件列表 -->
        <a th:href="@{/userOut}">退出登录</a>
    </div>
    <div class="content">
        <iframe th:src="@{/default}" name="content" width="100%" height="90%"></iframe>
    </div>
</div>

<script>
    // 获取当前页面的URL路径
    var path = window.location.pathname;
    // 获取用户名并显示
    // 设置选中菜单样式
    var menuItems = document.querySelectorAll(".sidebar a");
    menuItems.forEach(function (item) {
        if (item.getAttribute("href") === path) {
            item.classList.add("active");
        }
    });
    var id = localStorage.getItem('id');
    function myFunction() {
        axios({
            method: 'get',
            // url: 'http://8.134.144.39:9000/selectUserById/' + id
             url: 'http://localhost:9000/selectUserById/' + id
        }).then(function (response) {
            var data = response.data.data;
            var avatar = data.avatar;
            var name = data.name;
            console.log(avatar)
            var elementById = document.getElementById("imagePath");
            elementById.src = avatar;
            var username = document.getElementById("username");
            username.innerText = name;
        })
    }

    //添加监听
    document.addEventListener("DOMContentLoaded", function (event) {
        myFunction();
    })
</script>
</body>
</html>